<script setup>
import {ref} from "vue";
import n2Img from '../../../assets/images/navs/n2.jpg'
import n3Img from '../../../assets/images/navs/n3.jpg'
import n9Img from '../../../assets/images/navs/n9.jpg'
import n10Img from '../../../assets/images/navs/n10.jpg'

const props = defineProps({
  ext: Object
})

const themes = ref([
  {
    name: "n2",
    theme: "",
    img: n2Img
  },
  {
    name: "n9",
    theme: "jzl-nav-theme-n1",
    img: n9Img
  },
  {
    name: "n10",
    theme: "jzl-nav-theme-n2",
    img: n10Img
  },
  {
    name: "n3",
    theme: "jzl-nav-theme-n3",
    img: n3Img
  }
])

const handleThemeSelect = (themeInfo) => {
  // this.$set(this.ext, "theme", theme);
  props.ext.theme = themeInfo?.theme;
}

</script>

<template>
  <div class="ele-prop-item elem-design-prop-logic">
    <!--<h5>引用页面</h5>-->
    <el-form ref="form" label-position="top">
      <el-form-item label="主题">
        <template #label>
          <h5>主题</h5>
        </template>
        <div class="nav-theme-list">
          <div
            class="nav-theme"
            v-for="theme in themes"
            :class="{ 'active': theme?.theme === ext?.theme }"
            @click="handleThemeSelect(theme)"
          >
            <img :src="theme.img" />
          </div>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<style lang="scss" scoped>
.nav-theme-list {
  display: flex;
  flex-flow: wrap;

  .nav-theme {
    width: 88px;
    height: 60px;
    margin-right: 5px;
    margin-bottom: 5px;
    border: 1px solid #EEE;
    border-radius: 3px;
    cursor: pointer;
    overflow: hidden;

    &:hover, &.active {
      border-color: #666;
      box-shadow: 0 0 5px #EEE;
    }

    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
